// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC

@import "refactor/common-refactor.scss";

.color-bullet {
  position: relative;
  display: flex;
  flex-direction: row;
  width: var(--bullet-size, $s-24);
  height: var(--bullet-size, $s-24);
  min-width: var(--bullet-size, $s-24);
  min-height: var(--bullet-size, $s-24);
  border: $s-2 solid var(--color-bullet-border-color);
  border-radius: $br-circle;
  &.grid-area {
    grid-area: color;
  }
  &.mini {
    width: var(--bullet-size, $s-16);
    height: var(--bullet-size, $s-16);
    min-width: var(--bullet-size, $s-16);
    min-height: var(--bullet-size, $s-16);
    margin-top: 0;
    border: 1px solid var(--color-bullet-border-color);
  }

  &.is-not-library-color {
    overflow: hidden;
    border-radius: $br-8;
    & .color-bullet-wrapper {
      clip-path: none;
    }
    &.mini {
      border-radius: $br-4;
    }
  }
  &.is-gradient {
    background: url("")
      left center;
    background-color: var(--color-bullet-background-color);
    transform: rotate(-90deg);
  }
  &.is-transparent {
    background: url("")
      left center;
    background-color: var(--color-bullet-background-color);
  }
  .color-bullet-wrapper {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
    clip-path: circle(50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .color-bullet-wrapper > * {
    width: 100%;
    height: 100%;
    background-color: var(--color-bullet-background-color);
  }
  &:hover:not(.read-only) {
    border: $s-2 solid var(--color-bullet-border-color-selected);
  }
}

.color-text {
  @include twoLineTextEllipsis;
  @include bodySmallTypography;
  width: $s-80;
  text-align: center;
  margin-top: $s-2;
  max-height: $s-28;
  color: var(--palette-text-color);
  &.small-text {
    @include textEllipsis;
    max-height: $s-16;
  }
}

.big-text {
  @include inspectValue;
  @include twoLineTextEllipsis;
  line-height: 1;
  color: var(--palette-text-color);
  text-align: center;
}

.no-text {
  display: none;
}

.color-row-name {
  color: var(--menu-foreground-color);
}
